<template>
    <div class="mt-[20px] flex">
        <ul class="typeList">
            <li v-for="(item, index) in typeList" :key="index" @click="handleSelectInfo(item.label)">
                {{ item.label }} ({{ item.number }})
            </li>
        </ul>
        <ul class="infoList ml-[40px]">
            <li v-for="(item, index) in infoList">
            <div class="title">{{ item.title }}</div>
            <div class="content">
                <span class="w-[385px] mr-[74px]">{{ item.content }}</span>
                <span class="mr-[143px]">{{ item.date }}</span>
                <span>{{ item.type }}</span>

            </div>

            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const typeList = ref([
    {
        label: '查看全部手册',
        number: 3
    },
    {
        label: '数据手册',
        number: 1
    },
    {
        label: '技术文章',
        number: 1
    },
    {
        label: '可靠性数据',
        number: 1
    }

])
const infoList = ref([
{
    title: '数据手册',
    content: `ES5030:2.6V~5.5V输入，3A输出小封装同步降压电源转换器`,
    date: '8/22/2023',
    type: 'PDF'
},
{
    title: '技术文章',
    content: '如何为车辆ADAS设计更好的高电流开关电源',
    date: '8/22/2023',
    type: 'PDF'
},
{
    title: '可靠性数据',
    content: 'ES5030 Reliability Data',
    date: '8/22/2023',
    type: 'PDF'
}
])
const handleSelectInfo = (title) => {
    const list=[
{
    title: '数据手册',
    content:  `ES5030:2.6V~5.5V输入，3A输出小封装同步降压电源转换器`,
    date: '8/22/2023',
    type: 'PDF'
},
{
    title: '技术文章',
    content: '如何为车辆ADAS设计更好的高电流开关电源',
    date: '8/22/2023',
    type: 'PDF'
},
{
    title: '可靠性数据',
    content: 'ES5030 Reliability Data',
    date: '8/22/2023',
    type: 'PDF'
}
]
infoList.value=list.filter(item=>item.title===title)
if(infoList.value.length==0){
    infoList.value= list
}
}
</script>
<style lang="scss" scoped>
.typeList {
    border-radius: 2px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    width: 244px;
    li {
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 500;
        font-feature-settings: "kern" on;
        color: #333333;
        position: relative;
       
        &:hover {
            background: #712C2F;
            color: #fff;
            &::after {
            content: '';
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 38px;
            background: #712C2F;
            display: inline-block;
        }
        }
    }
}
.infoList{
   
.title{
    font-family: Source Han Sans;
    font-size: 16px;
    font-weight: 600;
    color: #3D3D3D;
    border-bottom: 1px solid #D8D5D5;
    padding-bottom: 6px;
    margin-top: 8px;
}
.content{
    margin-top: 10px;
    font-size: 14px;
    color: #3D3D3D;
    display: flex;
    justify-content: left;
    margin-bottom: 8px;
}
li{
    &:hover{
        cursor: pointer;
    .title,span{
        color: #712C2F;
      
    }
}
}
}
</style>